<template>
    <div class="content">
        <div class="background-animation"></div>
        <el-tabs v-model="activeTab" :tab-position="tabPosition" class="custom-tabs" @tab-click="handleTabClick">
            <el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab.label" :name="String(index)">
                <transition name="fade" mode="out-in">
                    <div class="tab-content" :key="index">
                        <div class="header-section">
                            <h2 class="section-title">{{ tab.label }}</h2>
                            <div class="decorative-line"></div>
                        </div>
                        <div class="content-wrapper" :class="{ 'has-content': tab.content }">
                            <div v-if="tab.content" class="intro-text" v-html="tab.content"></div>
                            <div v-else class="empty-state">
                                <div class="empty-animation">
                                    <i class="el-icon-edit-outline"></i>
                                </div>
                                <p class="empty-text">内容正在编写中...</p>
                                <p class="empty-subtext">敬请期待</p>
                            </div>
                        </div>
                    </div>
                </transition>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tabPosition: 'left',
            activeTab: '0',
            tabs: [
                {
                    label: '协会介绍',
                    content: `
                        <div class="intro-section">
                            <p class="highlight-text">广州软件学院计算机协会自2002年11月底正式成立，已走过23年的风雨历程。</p>
                            <p>作为一家专注于技术教育的服务组织，我们一直致力于提高和普及计算机技术。同时，我们也是广州计算机协会联盟的成员。</p>
                            <div class="achievement-card">
                                <h3>🏆 重要成就</h3>
                                <ul>
                                    <li>牵头举办两届从化地区高校数码设计大赛</li>
                                    <li>每年举办校园HTML5设计大赛</li>
                                    <li>为ACM编程算法爱好者提供组队平台</li>
                                    <li>荣获2016-2017年度"广东省优秀学生社团"称号</li>
                                </ul>
                            </div>
                            <div class="mission-statement">
                                <h3>🎯 我们的使命</h3>
                                <p>培养计算机领域的人才，朝着成为广州地区最顶尖计算机协会的目标前进。</p>
                            </div>
                        </div>
                    `
                },
                {
                    label: '指导老师',
                    content: `
                        <div class="mentors-section">
                            <div class="mentor-card">
                                <div class="mentor-avatar">
                                    <i class="el-icon-user-solid"></i>
                                </div>
                                <div class="mentor-info">
                                    <h3>范加乐 </h3>
                                    <p class="mentor-title">总务基建处</p>
                                    <p class="mentor-description">学校校友，拥有丰富教学经验。致力于指导学生在技术创新方面的发展。</p>
                                </div>
                            </div>
                        </div>
                    `
                },
                {
                    label: '会长团队',
                    content: `
                        <div class="leadership-section">
                            <div class="leader-card">
                                <div class="leader-avatar">
                                    <i class="el-icon-user"></i>
                                </div>
                                <div class="leader-info">
                                    <h3>你猜</h3>
                                    <p class="leader-title">会长</p>
                                    <p class="leader-description">软件工程专业大三学生，慧云跑团队负责人，致力于带领协会发展。</p>
                                </div>
                                 <div class="leader-info">
                                    <h3>你猜</h3>
                                    <p class="leader-title">副会长</p>
                                    <p class="leader-description">计算机专业大三学生致力于带领协会发展。</p>
                                </div>
                            </div>
                        </div>
                    `
                },
                {
                    label: '硬件组',
                    content: `
                        <div class="department-section">
                            <div class="department-intro">
                                <h3>硬件创新工作室</h3>
                                <p>专注于电脑维修、硬件开发和创客文化的推广。我们提供完整的电脑硬件教学和器材支持。</p>
                            </div>
                            <div class="leader-info">
                                <div class="leader-avatar">
                                    <i class="el-icon-user"></i>
                                </div>
                                <h4>王卓然</h4>
                                <p class="leader-title">硬件组组长</p>
                                <p>云计算专业，具有丰富的硬件开发经验</p>
                            </div>
                             <div class="leader-info">
                                <div class="leader-avatar">
                                    <i class="el-icon-user"></i>
                                </div>
                                <h4>黎庭玮</h4>
                                <p class="leader-title">硬件组组长</p>
                                <p>软件工程专业，具有丰富的硬件开发经验</p>
                                
                            </div>
                                 <div class="leader-info">
                                <div class="leader-avatar">
                                    <i class="el-icon-user"></i>
                                </div>
                                <h4>邹文轩</h4>
                                <p class="leader-title">硬件组组长</p>
                                <p>软件工程专业，具有丰富的硬件开发经验</p>
                            </div>
                            </div>
                        </div>
                    `
                },
                {
                    label: '设计组',
                    content: `
                        <div class="department-section">
                            <div class="department-intro">
                                <h3>设计创意工作室</h3>
                                <p>专注于UI/UX设计、平面设计和视觉创意。我们致力于为协会提供专业的设计支持。</p>
                            </div>
                            <div class="leader-info">
                                <div class="leader-avatar">
                                    <i class="el-icon-user"></i>
                                </div>
                                <h4>你猜</h4>
                                <p class="leader-title">设计组组长</p>
                                <p>数字媒体艺术专业，Adobe认证设计师</p>
                            </div>
                            <div class="department-achievements">
                                <h4>设计作品</h4>
                                <ul>
                                    <li>协会品牌形象设计</li>
                                    <li>活动海报设计</li>
                                    <li>网站UI/UX设计</li>
                                </ul>
                            </div>
                        </div>
                    `
                },
                {
                    label: '策划组',
                    content: `
                        <div class="department-section">
                            <div class="department-intro">
                                <h3>活动策划部门</h3>
                                <p>负责协会各类活动的策划、组织和执行。打造精彩纷呈的校园技术文化活动。</p>
                            </div>
                            <div class="leader-info">
                                <div class="leader-avatar">
                                    <i class="el-icon-user"></i>
                                </div>
                                <h4>你猜</h4>
                                <p class="leader-title">策划组组长</p>
                                <p>市场营销专业，具有丰富的活动策划经验</p>
                            </div>
                            <div class="department-achievements">
                                <h4>精彩活动</h4>
                                <ul>
                                    <li>年度技术交流会</li>
                                    <li>新生科技文化节</li>
                                    <li>黑客马拉松大赛</li>
                                </ul>
                            </div>
                        </div>
                    `
                },
                {
                    label: 'CA工作室',
                    content: `
                        <div class="department-section">
                            <div class="department-intro">
                                <h3>CA技术工作室</h3>
                                <p>专注于软件开发、人工智能和前沿技术研究。是协会的技术核心团队。</p>
                            </div>
                            <div class="leader-info">
                                <div class="leader-avatar">
                                    <i class="el-icon-user"></i>
                                </div>
                                <h4>你猜</h4>
                                <p class="leader-title">CA工作室负责人</p>
                                <p>计算机科学专业，全栈开发工程师</p>
                            </div>
                            <div class="department-achievements">
                                <h4>技术项目</h4>
                                <ul>
                                    <li>校园智能助手系统</li>
                                    <li>在线学习平台开发</li>
                                    <li>区块链应用研究</li>
                                </ul>
                            </div>
                        </div>
                    `
                },
                {
                    label: '协会通知',
                    content: `
                        <div class="notice-section">
                            <div class="notice-card important">
                                <div class="notice-icon">📢</div>
                                <div class="notice-content">
                                    <h3>2025年春季招新通知</h3>
                                    <p class="notice-time">2025-02-15</p>
                                    <p>计算机协会2025年春季招新活动即将开始，欢迎对技术感兴趣的同学加入我们！</p>
                                    <div class="notice-details">
                                        <p>📅 报名时间：2025年3月1日-3月15日</p>
                                        <p>📍 报名地点：计算机楼102室</p>
                                        <p>📝 招新方向：软件开发、硬件设计、UI设计、活动策划等</p>
                                    </div>
                                </div>
                            </div>
                            <div class="notice-card">
                                <div class="notice-icon">📋</div>
                                <div class="notice-content">
                                    <h3>技术分享会预告</h3>
                                    <p class="notice-time">2025-02-10</p>
                                    <p>主题：人工智能与未来发展</p>
                                    <p>时间：2025年2月25日 14:30</p>
                                    <p>地点：计算机楼报告厅</p>
                                </div>
                            </div>
                        </div>
                    `
                },
                {
                    label: '比赛通知',
                    content: `
                        <div class="competition-section">
                            <div class="competition-card active">
                                <div class="competition-status">报名中</div>
                                <h3>2025年HTML5设计大赛</h3>
                                <div class="competition-info">
                                    <p>🏆 赛事级别：校级</p>
                                    <p>📅 报名截止：2025-03-20</p>
                                    <p>🎯 参赛对象：全校学生</p>
                                    <p>🎁 奖项设置：
                                        <ul>
                                            <li>一等奖：敬请期待</li>
                                            <li>二等奖：敬请期待</li>
                                            <li>三等奖：敬请期待</li>
                                        </ul>
                                    </p>
                                </div>
                            </div>
                            <div class="competition-card upcoming">
                                <div class="competition-status">即将开始</div>
                                <h3>ACM程序设计竞赛</h3>
                                <div class="competition-info">
                                    <p>🏆 赛事级别：省级</p>
                                    <p>📅 比赛时间：2025-04-15</p>
                                    <p>📝 报名方式：团队报名（3人一队）</p>
                                </div>
                            </div>
                        </div>
                    `
                },
                {
                    label: '日常通知',
                    content: `
                        <div class="daily-notice-section">
                            <div class="daily-notice-card">
                                <div class="notice-date">
                                    <span class="month">Feb</span>
                                    <span class="day">19</span>
                                </div>
                                <div class="notice-content">
                                    <h3>技术部周会</h3>
                                    <p>时间：每周三 19:00-20:30</p>
                                    <p>地点：计算机楼205</p>
                                    <p>内容：项目进度汇报与技术分享</p>
                                </div>
                            </div>
                            <div class="daily-notice-card">
                                <div class="notice-date">
                                    <span class="month">Feb</span>
                                    <span class="day">20</span>
                                </div>
                                <div class="notice-content">
                                    <h3>设备维护日</h3>
                                    <p>时间：周四 14:00-17:00</p>
                                    <p>地点：协会机房</p>
                                    <p>内容：定期设备维护与检修</p>
                                </div>
                            </div>
                        </div>
                    `
                }
            ]
        };
    },
    methods: {
        handleTabClick(tab) {
            // 确保标签页切换时重新触发动画
            this.$nextTick(() => {
                const contentWrapper = document.querySelector('.content-wrapper');
                if (contentWrapper) {
                    contentWrapper.style.animation = 'none';
                    contentWrapper.offsetHeight; // 触发重排
                    contentWrapper.style.animation = null;
                }
            });
        }
    },
    mounted() {
        // 初始化时设置活动标签页
        this.activeTab = '0';
    }
};
</script>

<style>
.content {
    width: 95%;
    max-width: 1600px;
    min-height: 90vh;
    margin: 20px auto;
    padding: 30px;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #f3f4f6, #ffffff);
    z-index: -1;
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.custom-tabs {
    height: 100%;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.tab-content {
    padding: 30px;
    height: 75vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #518CA6 transparent;
}

.tab-content::-webkit-scrollbar {
    width: 6px;
}

.tab-content::-webkit-scrollbar-thumb {
    background-color: #518CA6;
    border-radius: 3px;
}

.header-section {
    margin-bottom: 30px;
    position: relative;
}

.section-title {
    color: #1a365d;
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    position: relative;
    display: inline-block;
}

.decorative-line {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #518CA6, #86C1E9);
    margin-top: 10px;
    border-radius: 2px;
    transform-origin: left;
    animation: lineGrow 0.6s ease-out;
}

@keyframes lineGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.content-wrapper {
    opacity: 0;
    animation: fadeUp 0.6s ease-out forwards;
    animation-delay: 0.3s;
}

.intro-section {
    display: grid;
    gap: 30px;
}

.highlight-text {
    font-size: 1.2em;
    color: #2d3748;
    font-weight: 500;
    line-height: 1.6;
    border-left: 4px solid #518CA6;
    padding-left: 20px;
    margin: 20px 0;
}

.achievement-card, .mission-statement {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.achievement-card:hover, .mission-statement:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}

.achievement-card h3, .mission-statement h3 {
    color: #2d3748;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.achievement-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.achievement-card li {
    padding: 10px 0;
    position: relative;
    padding-left: 25px;
}

.achievement-card li::before {
    content: "•";
    color: #518CA6;
    font-size: 1.5em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: #a0aec0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.empty-animation {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
}

.empty-animation i {
    font-size: 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: float 3s ease-in-out infinite;
    color: #518CA6;
}

.empty-text {
    font-size: 24px;
    font-weight: 500;
    margin: 15px 0;
    background: linear-gradient(135deg, #518CA6, #3a7490);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.empty-subtext {
    font-size: 16px;
    color: #718096;
    margin-top: 5px;
}

@keyframes float {
    0% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -60%); }
    100% { transform: translate(-50%, -50%); }
}

/* Tab样式优化 */
.el-tabs__item {
    height: auto !important;
    padding: 15px 25px !important;
    margin: 8px !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.el-tabs__item.is-active {
    background: linear-gradient(135deg, #518CA6, #3a7490) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(81, 140, 166, 0.3) !important;
    transform: translateX(5px);
}

.el-tabs__item:not(.is-active) {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #2d3748 !important;
}

.el-tabs__item:hover:not(.is-active) {
    color: #518CA6 !important;
    background: rgba(81, 140, 166, 0.1) !important;
    transform: translateX(5px);
}

/* 部门卡片样式 */
.department-section {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: slideInFromRight 0.5s ease-out forwards;
}

.department-section:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.department-intro {
    position: relative;
    padding-left: 15px;
    margin-bottom: 20px;
}

.department-intro::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(to bottom, #518CA6, #86C1E9);
    border-radius: 2px;
}

.department-intro h3 {
    color: #2d3748;
    font-size: 24px;
    margin-bottom: 10px;
}

.department-intro p {
    color: #4a5568;
    line-height: 1.6;
}

.leader-info {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 15px;
    background: rgba(81, 140, 166, 0.05);
    border-radius: 12px;
}

.leader-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #518CA6, #3a7490);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    transition: transform 0.3s ease;
}

.leader-info h4 {
    color: #2d3748;
    margin: 0 0 5px 0;
    font-size: 18px;
}

.leader-title {
    color: #518CA6;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.department-achievements {
    margin-top: 20px;
}

.department-achievements h4 {
    color: #2d3748;
    margin-bottom: 15px;
}

.department-achievements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.department-achievements li {
    padding: 12px 15px;
    margin: 8px 0;
    background: rgba(81, 140, 166, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 30px;
}

.department-achievements li::before {
    content: '→';
    position: absolute;
    left: 12px;
    color: #518CA6;
    transition: transform 0.3s ease;
}

.department-achievements li:hover {
    background: rgba(81, 140, 166, 0.2);
    transform: translateX(10px);
}

.department-achievements li:hover::before {
    transform: translateX(5px);
}

/* 通知卡片样式 */
.notice-section, .competition-section, .daily-notice-section {
    display: grid;
    gap: 20px;
    animation: fadeUp 0.5s ease-out forwards;
}

.notice-card, .competition-card, .daily-notice-card {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.notice-card {
    display: flex;
    gap: 20px;
}

.notice-card.important {
    border-left: 4px solid #518CA6;
}

.notice-icon {
    font-size: 24px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(81, 140, 166, 0.1);
    border-radius: 10px;
}

.notice-content h3 {
    color: #2d3748;
    margin: 0 0 10px 0;
}

.notice-time {
    color: #718096;
    font-size: 0.9em;
    margin: 5px 0;
}

.notice-details {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

/* 比赛卡片特殊样式 */
.competition-card {
    padding: 25px;
}

.competition-status {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
}

.competition-card.active .competition-status {
    background: #c6f6d5;
    color: #2f855a;
}

.competition-card.upcoming .competition-status {
    background: #fed7d7;
    color: #c53030;
}

/* 动画效果 */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: translateX(10px);
}

.fade-enter-to,
.fade-leave-from {
    opacity: 1;
    transform: translateX(0);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .content {
        width: 100%;
        padding: 15px;
        margin: 0;
        border-radius: 0;
    }

    .el-tabs__item {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    .section-title {
        font-size: 24px;
    }

    .notice-card, .competition-card, .daily-notice-card {
        flex-direction: column;
    }

    .notice-icon {
        margin-bottom: 10px;
    }
}
</style>